chore: create single post view

1 files changed, 58 insertions, 0 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
new file mode 100644
index 0000000..7ad3692
--- /dev/null
+++ b/src/pages/article/[slug].tsx
@@ -0,0 +1,58 @@
+import Layout from '@components/Layouts/Layout';
+import { fetchAllPostsSlug } from '@services/graphql/blog';
+import { getPostBySlug } from '@services/graphql/post';
+import { NextPageWithLayout } from '@ts/types/app';
+import { ArticleProps } from '@ts/types/articles';
+import { loadTranslation } from '@utils/helpers/i18n';
+import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
+import { ParsedUrlQuery } from 'querystring';
+import { ReactElement } from 'react';
+
+const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
+  return (
+    <article>
+      <header>
+        <h1>{post.title}</h1>
+        <div dangerouslySetInnerHTML={{ __html: post.intro }}></div>
+      </header>
+      <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
+    </article>
+  );
+};
+
+SingleArticle.getLayout = function getLayout(page: ReactElement) {
+  return <Layout>{page}</Layout>;
+};
+
+interface PostParams extends ParsedUrlQuery {
+  slug: string;
+}
+
+export const getStaticProps: GetStaticProps = async (
+  context: GetStaticPropsContext
+) => {
+  const translation = await loadTranslation(
+    context.locale!,
+    process.env.NODE_ENV === 'production'
+  );
+  const { slug } = context.params as PostParams;
+  const post = await getPostBySlug(slug);
+
+  return {
+    props: {
+      post,
+      translation,
+    },
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const allSlugs = await fetchAllPostsSlug();
+
+  return {
+    paths: allSlugs.map((post) => `/article/${post.slug}`),
+    fallback: true,
+  };
+};
+
+export default SingleArticle;